<template>
  <!-- 添加漂浮容器和美化样式 -->
  <div class="layer-tree-container">
    <div class="layer-tree-header">
      <i class="el-icon-map-location"></i> 图层管理
    </div>
 <el-tree
  class="layer-tree"
  :data="layerTreeData"
  :props="treeProps"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[1]"
  :default-checked-keys="defaultCheckedKeys"
  @check="handleCheck">
</el-tree>
  </div>
</template>



<script>
import {layerTreeData} from '@/views/biz/utils/config'



export default {
  name: 'LayerTree',
  data() {
    return {
      treeProps: {
        children: 'children',
        label: 'name'
      },
      layerTreeData: layerTreeData,
      checkedLayers: [],
      defaultCheckedKeys: ['zidongzhan'] 
    //  defaultCheckedKeys: [] 

    };
  },
  mounted() {
    this.initCheckedLayers();
  },
  methods: {
    // 获取所有选中的叶子节点
    getCheckedLeafNodes(nodes, checkedNodes) {
      let leafNodes = [];
      
      const traverse = (nodeList) => {
        nodeList.forEach(node => {
          // 判断是否为叶子节点（没有children或children为空数组）
          if (!node.children || node.children.length === 0) {
            // 检查该节点是否在选中节点列表中
            const isChecked = checkedNodes.some(checkedNode => checkedNode.id === node.id);
            if (isChecked) {
              // 检查是否已存在，避免重复添加
              const exists = leafNodes.some(leafNode => leafNode.id === node.id);
              if (!exists) {
                leafNodes.push(node);
              }
            }
          } else {
            // 递归处理子节点
            traverse(node.children);
          }
        });
      };
      
      traverse(nodes);
      return leafNodes;
    },
    initCheckedLayers() {
      // 初始化时获取默认选中的叶子节点
      this.checkedLayers = [{
        id: "guokongzhan",
        name: "国控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "guokongzhan",
            layername: "guokongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      },
      {
        id: "shengkongzhan",
        name: "省控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "shengkongzhan",
            layername: "shengkongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      },
      {
        id: "shikongzhan",
        name: "市控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "shikongzhan",
            layername: "shikongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      },
      {
        id: "xiankongzhan",
        name: "县控站",
        type: "point",
        visible: false,
        checked: false,
        layers: [
          {
            id: "xiankongzhan",
            layername: "xiankongzhan",

            dataType: "dataApi",
            geoType: "Point",
          },
        ],
      }];
      const activeLayer={"id":"zidongzhan","name":"自动站"};
      setTimeout(() => {
        this.$emit('layer-change', this.checkedLayers, activeLayer);
      }, 1000);
      // this.$emit('layer-change', this.checkedLayers, activeLayer);
    },
    // 处理节点选中事件
    handleCheck(data, checkedInfo) {
      const activeLayer = {id: data.id, name: data.name};
      // 获取所有选中的节点
      const checkedNodes = checkedInfo.checkedNodes;
      
      // 从所有节点中筛选出选中的叶子节点
      this.checkedLayers = this.getCheckedLeafNodes(this.layerTreeData, checkedNodes);
      
      console.log("checkedLayers",this.checkedLayers);
      this.$emit('layer-change', this.checkedLayers,activeLayer);
    }

  }
};
</script>

<style scoped>
.layer-tree-container {
  width: 100%;
  height: 40vh;
  background-color: #fff;
  padding: 15px;
  overflow-y: auto;
}

.layer-tree {--el-tree-node-content-hover-bg-color: #f5f7fa;}
.custom-tree-node {display: flex;align-items: center;padding: 4px 0;}
/* 添加以下样式 */
.layer-tree-container {
  position: absolute; /* 绝对定位实现漂浮效果 */

  left: 20px; /* 距离左侧20px */
  width: 240px; /* 固定宽度 */
  background-color: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  z-index: 100; /* 确保在地图上方 */
  overflow: hidden;
}

.layer-tree-header {
  padding: 12px 16px;
  background-color: #1890ff; /* 蓝色标题背景 */
  color: white;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.layer-tree-header i {
  margin-right: 8px;
}

.layer-tree {
  padding: 16px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* 美化滚动条 */
.layer-tree::-webkit-scrollbar {
  width: 6px;
}

.layer-tree::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

/* 美化树节点 */
.el-tree-node__content {
  height: 36px;
  align-items: center;
}

.el-tree-node__content:hover {
  background-color: #f5f7fa;
}

.el-checkbox__inner {
  border-radius: 4px;
}
</style>